<template>
  <div class="weixin-page">
    <input id="topicId" type="hidden" value="173"/>
    <input id="isAdmin" type="hidden" value=""/>
    <div class="clearfix"></div>
    <input id="STATICURL" type="hidden" value="//static.clewm.net/cli"/>


    <!-- 导航菜单 -->
    <nav class="cli_nav new-light scene_mobile clearfix">
      <ul class="sub_nav sub_mobile_nav cli_head_container clearfix">
        <li><router-link class="t06971093650622ab_sep [navigation_text]" to="/qrcode/text" @click="StatisticsData(120,11)" title="生成文本二维码">文本</router-link></li>
        <li><router-link class="tab_sep [navigation_url]" to="/qrcode/url" @click="StatisticsData(120,12)" title="生成网址二维码">网址</router-link></li>
        <li><router-link class="tab_sep [navigation_files]" to="/qrcode/files" @click="StatisticsData(120,13)" title="生成文件二维码">文件</router-link></li>
        <li><router-link class="tab_sep [navigation_img]" to="/qrcode/img" @click="StatisticsData(120,14)" title="生成图片二维码">图片</router-link></li>
        <li><router-link class="tab_sep [navigation_multimedia]" to="/qrcode/multimedia" @click="StatisticsData(120,15)" title="生成音视频二维码">音视频</router-link></li>
        <li><router-link class="tab_sep [navigation_vcard]" to="/qrcode/vcard" @click="StatisticsData(120,16)" title="名片二维码">名片</router-link></li>
        <li><router-link class="tab_sep on [navigation_weixin]" to="/qrcode/weixin" @click="StatisticsData(120,17)" title="美化微信二维码">微信</router-link></li>
        <li><router-link class="tab_sep [navigation_form]" to="/qrcode/form" @click="StatisticsData(120,124001)" title="记录表单">表单</router-link></li>
        <li><router-link class="tab_sep [navigation_batch]" to="/qrcode/batch" title="批量生码">批量生码</router-link></li>
        <li><router-link class="tab_sep [navigation_tools]" to="/qrcode/tools" @click="StatisticsData(120,161)" title="更多高级功能">更多工具</router-link></li>
        <li class="pull-right right-nav-items none-after-form">
          <ul>
            <li class="pull-left nav-tool-popover-scan-new">
              <router-link class="template-code" data-analyze="8,118010" to="/qrcode/template" id="__index_template">
                <i class="clifont anticon-moban1"></i>
                模板库建码
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

    <div class="wrapper new-light mobile-scene-min-width">
      <div class="page-main-content p-b">
        <div class="alert alert-warning none" id="VerifyTip"></div>
        <div class="row noMagrin" id="meihua-qr">
          <div class="col-md-8 noPadding" id="qrgenerate-box" style="width: 67.6%; float: left;">
            <div class="qrgenerate-box">
              <div class="row no-gutter">
                <div class="nav-tabs" style="margin-top: 38px">
                  <ul class="nav-tabs_ul">
                    <li class="nav-tabs_item active">
                      <span aria-expanded="true" data-target="#tab1" data-toggle="tab">公众号</span>
                    </li>
                    <li class="nav-tabs_item">
                      <span aria-expanded="false" data-target="#tab2" data-toggle="tab">个人帐号</span>
                    </li>
                  </ul>
                  <div class="clearfix"></div>
                </div>
                <p class="tab-content-desc">
                  可美化微信二维码样式，自定义添加logo和文字，修改颜色等。
                </p>
                <div class="tab-content" style="margin-top: 16px;">
                  <div aria-expanded="false" class="tab-pane animated fadeIn active" id="tab1">
                    <div class="weixin_input_wrapper">
                      <input class="form-control form-control-lg weixin_input" id="weixinurl" placeholder="请输入微信公众号的微信号，例如：caoliaoma" type="text"/>
                    </div>
                    <div class="clear" style="position: absolute; right: 0; top: 12px;">
                      <div class="form-file pull-left" style="z-index: 1; margin-right: 24px;">
                        <span class="upload-hover-span" data-container="body" data-html="true" data-placement="top" data-toggle="tooltip" data-trigger="hover" title="上传二维码图片">
                          <input class="addbtn_input uploadfile" data-uptype="weixin" id="filedatacode" name="Filedata" style="width: 24px;" type="file"/>
                          <span class="clifont anticon-cli-upload" style="cursor:pointer;font-size: 20px; color: #666;padding-left: 4px;"></span>
                        </span>
                        <span class="clifont anticon-shexiangtou" data-container="body" data-html="true" data-placement="top" data-toggle="tooltip" data-trigger="hover" data-typename="weixin" data-webcamerabtn="" id="weixin-videoscan" style="cursor:pointer;font-size: 20px; color: #666; margin-left: 12px;" title="摄像头扫描"></span>
                      </div>
                    </div>
                    <div class="text-center" style="margin-top: 42px;">
                      <button class="uploadbtn btn green weixin-confirm btn-green-shadow btn-cli-green" data-loading-text="正在生成..." id="click-create">生成二维码</button>
                    </div>
                    <input id="imgcon" type="hidden"/>
                  </div>
                  <div aria-expanded="true" class="tab-pane animated fadeIn" id="tab2">
                    <div class="m-b single-wrap">
                      <div class="form-file pointer" style="display: inline-block;">
                        <input class="addbtn_input uploadfile pointer" data-uptype="weixin" id="filedatacode" name="Filedata" type="file"/>
                        <button class="single-btn pointer">
                          <span class="single-icon single-icon-upload"></span>
                          <div style="line-height: 16px;">上传二维码图片</div>
                        </button>
                      </div>
                      <button class="single-btn" data-typename="weixin" data-webcamerabtn="" style="margin-left: 48px;">
                        <span class="single-icon single-icon-camera"></span>
                        <div style="line-height: 16px;">摄像头扫描</div>
                      </button>
                      <input id="imgcon" type="hidden"/>
                    </div>
                  </div>
                </div>
              </div>
              <input id="tjurl" type="hidden" value=""/>
              <input id="tjuid" type="hidden" value=""/>
              <input id="tjcoding" type="hidden" value=""/>
              <input id="isturn" type="hidden" value=""/>
              <div class="none" id="length-over-tip" role="tooltip">
                <div style="color: #999;">
                  内容已超150字，生成的二维码图案过于复杂不易扫描，请使用
                  <a class="link text-blue" href="help/60448.html" target="_blank">活码</a>
                </div>
              </div>
              <div class="submit text-center" style="padding-bottom: 20px">
                <a class="btn btn-fw green none" data-generate-qractive="" data-isactives="2" href="javascript:;" id="change_active2">生成活码</a>
              </div>
            </div>
          </div>

          <div class="include-qrfun-origin">
            <div class="qrbox col-md-4 weixin-qrcode-wrapper noQrCode noQrCode" data-is_create_code="0" id="qrfun-box">
              <div class="qrcode-wrapper">
                <div class="qrfun-tab-content code-tab-content">
                  <img id="snapQrimage" src="" style="display: none"/>
                  <div class="has-code-action after-create-qrfun-item">
                    <div class="choose-label-style-tpl isSimpleStyle" id="choose_label_style_tpl">
                      <div class="choose_label_style_tpl_name" data-container="body" data-content="" data-placement="bottom">
                        标签样式：
                      </div>
                      <div class="choose-tpl-action cliLink" id="toggle_label_style_tpl">
                        <span class="choose-tpl-action-text" id="choose_tpl_action_text">更换</span>
                        <i class="clifont anticon-cli-angle-right"></i>
                      </div>
                    </div>
                  </div>
                  <div class="qrcode">
                    <table class="qrimage-wrap-loading qrimage-wrap b-a text-center" data-loading-text="&lt;img style='margin-top: 126px;margin-bottom: 126px;width:48px;opacity:0.3;' src='//static.clewm.net/cli/images/cli-loading@2x.gif'&gt;" data-qrimage-wrap="" id="click-create" style="border-radius:4px;">
                      <tr>
                        <td class="qrimage-td-h" data-is_create_code="0" style="color:#ececec;font-size: 16px;">
                          <img alt="生成的二维码" id="qrimage" src=""/>
                          <div class="deqr-wrapper" id="deqr-wrapper">
                            <router-link class="deqr-link" to="/qrcode/deqr" @click="StatisticsData(1,15)" style="padding-right: 0;padding-left: 4px;color: #666;" title="通过二维码图片，快速解析内容">
                              <span class="clifont anticon-cli-scanning"></span>解码
                            </router-link>
                          </div>
                          <span class="create-code-tip" data-create-code-tip="">
                            <img alt="二维码未生成" src="../../assets/images/ee35eb02b46b.png"/>
                          </span>
                        </td>
                      </tr>
                    </table>
                    <table class="qrimage-wrap b-a text-center none click-create-active" data-generate-qractive="" data-loading-text="" style="cursor: pointer;border-radius:2px;">
                      <tr>
                        <td class="qrimage-td-h" data-is_create_code="0" height="260px;" style="color:#ececec;font-size: 16px;">
                          <img alt="生成的二维码" id="qrimage" src=""/>
                          <div class="deqr-wrapper" id="deqr-wrapper">
                            <router-link class="deqr-link" to="/qrcode/deqr" @click="StatisticsData(1,15)" style="padding-right: 0;padding-left: 4px;color: #666;" title="通过二维码图片，快速解析内容">
                              <span class="clifont anticon-cli-scanning"></span>解码
                            </router-link>
                          </div>
                          <span class="create-code-tip" data-create-code-tip="">
                            <img alt="二维码未生成" src="../../assets/images/ee35eb02b46b.png"/>
                          </span>
                        </td>
                      </tr>
                    </table>
                  </div>
                  <div class="tools-v2 tools after-create-qrfun-item" style="display: block;">
                    <div class="when-have-code">
                      <div class="tab-container">
                        <div class="qr-style-tab-item template-item">
                          <div class="more-setting-info-wrap-box" id="more-setting-info-wrap-box">
                            <div class="qrcode-box more-setting-info-wrap">
                              <span class="more-setting-codetype-text">QR Code</span>，
                              <span class="more-setting-level-text">30%容错</span>
                              <span class="more-setting-size-text">，400×400px</span>
                              <i class="cliIcon anticon anticon-cli-settings more-setting-icon" style="font-size: 16px;"></i>
                            </div>
                            <div class="otherCode more-setting-info-wrap none">
                              <span class="otherCode-text">
                                <span class="otherCodeName">汉信码</span>
                              </span>
                              <i class="cliIcon anticon anticon-cli-settings more-setting-icon" style="font-size: 16px;"></i>
                            </div>
                          </div>
                          <div class="qr-style-tab-item beautify" style="display: block; text-align: center; font-size: 0;margin-bottom: 8px;">
                            <div class="btn-block new-up-icon-btn-wrapper" data-container="body" data-content="该码制暂不提供此功能" data-placement="bottom" id="upload-and-style-btn-wrapper" style="width: 100%;display: inline-flex;display: -ms-inline-flexbox;">
                              <button class="btn qrfun-btn qrfun-beautify-btn" id="upload-logo-btn" style="margin-right: 6px;" type="button">上传Logo</button>
                              <button class="btn qrfun-btn qrfun-beautify-btn" id="new-qr-style-func" type="button">二维码美化</button>
                              <button class="btn qrfun-btn qrfun-beautify-btn none" id="edit-filed-btn" style="margin-left: 6px;" type="button">修改字段</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <ul class="sub_nav qrcode-bottom sub_mobile_nav clearfix pull-right" id="qrcode-bottom-tool">
                  <li class="popover_link pull-left nav-tool-popover-scan-new p-t-b-8 pointer mh-popover-origin" id="mh_link">
                    <div class="popover_link_wrap">
                      <a class="tab_sep m-r-0 divider code-meihua-style" href="https://mh.cli.im" @click="StatisticsData(120,147101)" style="display: inline-block;" target="_blank" title="快速美化二维码图案，上传logo等">
                        <span class="clifont anticon-meihua"></span>美化
                      </a>
                      <div class="top-mark"></div>
                      <div class="drop-down">
                        <span class="code-tools-adv-edit-tip">快速美化二维码图案，上传logo等</span>
                      </div>
                    </div>
                  </li>
                  <li class="popover_link pull-left nav-tool-popover-scan-new p-t-b-8 pointer mh-popover-origin" id="style-label-created">
                    <div class="popover_link_wrap">
                      <a href="javascript:;" id="style-label-created-link">
                        <span class="tab_sep m-r-0 code-meihua-style">
                          <span class="clifont anticon-zhizuobiaoqian"></span>制作标签
                        </span>
                      </a>
                      <div class="top-mark"></div>
                      <div class="drop-down">
                        <span class="code-tools-adv-edit-tip">选择模板，填入数据，批量制作标签</span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>

            <!-- Modal for download settings -->
            <div class="modal fade modal-code-more-setting" data-backdrop="static" data-keyboard="false" id="modal-code-more-setting" role="dialog" tabindex="-1">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                      <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">下载设置</h4>
                  </div>
                  <div class="modal-body">
                    <div class="main-setting">
                      <div class="wrap-item code-type-wrap" id="code-type-wrap">
                        <div class="label-title">
                          码制<i class="cliIcon anticon anticon-QuestionCircle code-type-popover-wrapper" data-container="body" data-content="&lt;div class='common-popover-content'&gt;提供 QR Code、汉信码、 PDF417、Data Matrix4种最常见的码制的生成。&lt;a class='cliLink' href='https://cli.im/help/77753' target='_blank' onclick='StatisticsData(352,124334)'&gt;了解详情&lt;/a&gt;&lt;/div&gt;" data-placement="top" id="code-type-popover-wrapper" style="display: inline-block;margin-left: 2px;color: #bbb;cursor: pointer;"></i>：
                        </div>
                        <div class="radio-content">
                          <label class="ant-radio-wrapper">
                            <span class="ant-radio">
                              <input class="ant-radio-input" name="codeTypeNew" type="radio" value="qr"/>
                              <span class="ant-radio-inner"></span>
                            </span>
                            <span class="radio-text">QR Code</span>
                          </label>
                          <label class="ant-radio-wrapper">
                            <span class="ant-radio">
                              <input class="ant-radio-input" name="codeTypeNew" type="radio" value="hanxin"/>
                              <span class="ant-radio-inner"></span>
                            </span>
                            <span class="radio-text">汉信码</span>
                          </label>
                          <label class="ant-radio-wrapper">
                            <span class="ant-radio">
                              <input class="ant-radio-input" name="codeTypeNew" type="radio" value="pdf417"/>
                              <span class="ant-radio-inner"></span>
                            </span>
                            <span class="radio-text">PDF417</span>
                          </label>
                          <label class="ant-radio-wrapper">
                            <span class="ant-radio">
                              <input class="ant-radio-input" name="codeTypeNew" type="radio" value="dm"/>
                              <span class="ant-radio-inner"></span>
                            </span>
                            <span class="radio-text">Data Matrix</span>
                          </label>
                        </div>
                      </div>
                      <div class="wrap-item code-type-wrap" id="code-level-wrap">
                        <div class="label-title">
                          容错率<i class="cliIcon anticon anticon-QuestionCircle code-level-popover-wrapper" data-container="body" data-content="&lt;div class='common-popover-content'&gt;容错率设置越高，二维码生成的码点密度越高，可在遮挡越多的情况下被扫描出来。&lt;a class='cliLink' onclick='StatisticsData(352,124305)' href='https://cli.im/help/57415' target='_blank'&gt;了解详情&lt;/a&gt;&lt;/div&gt;" data-placement="top" id="code-level-popover-wrapper" style="display: inline-block;margin-left: 2px;color: #bbb;cursor: pointer;"></i>：
                        </div>
                        <div class="radio-content">
                          <label class="ant-radio-wrapper">
                            <span class="ant-radio">
                              <input class="ant-radio-input" name="codeLevel" type="radio" value="L"/>
                              <span class="ant-radio-inner"></span>
                            </span>
                            <span class="radio-text">7%</span>
                          </label>
                          <label class="ant-radio-wrapper">
                            <span class="ant-radio">
                              <input class="ant-radio-input" name="codeLevel" type="radio" value="M"/>
                              <span class="ant-radio-inner"></span>
                            </span>
                            <span class="radio-text">15%</span>
                          </label>
                          <label class="ant-radio-wrapper">
                            <span class="ant-radio">
                              <input class="ant-radio-input" name="codeLevel" type="radio" value="Q"/>
                              <span class="ant-radio-inner"></span>
                            </span>
                            <span class="radio-text">25%</span>
                          </label>
                          <label class="ant-radio-wrapper">
                            <span class="ant-radio">
                              <input class="ant-radio-input" name="codeLevel" type="radio" value="H"/>
                              <span class="ant-radio-inner"></span>
                            </span>
                            <span class="radio-text">30%</span>
                          </label>
                        </div>
                      </div>
                      <div class="wrap-item code-size-wrap" id="code-size-wrap">
                        <div class="label-title">尺寸：</div>
                        <div class="radio-content">
                          <label class="ant-radio-wrapper">
                            <span class="ant-radio">
                              <input class="ant-radio-input" name="codeSize" type="radio" value=""/>
                              <span class="ant-radio-inner"></span>
                            </span>
                            <span class="radio-text">400 x 400 px</span>
                          </label>
                        </div>
                      </div>
                      <div class="wrap-item custom-size-wrap none" id="custom-size-wrap">
                        <div class="label-title">输入尺寸：</div>
                        <div class="input-wrap">
                          <div class="input-box">
                            <input class="custom-size-input" id="customSizeInput" name="codeSize" type="number" value="500"/>
                            <span class="unit-box">
                              <span class="unit-text">px</span>
                            </span>
                          </div>
                          <span class="size-tip">最大可设为1000px</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-primary success-btn" id="code-more-setting-submit" type="button">保存设置</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Modal for vector format -->
            <div class="modal fade modal-code-vector-fromat" id="modal-code-vector-fromat" role="dialog" tabindex="-1">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                      <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">
                      下载矢量格式
                      <span class="modal-title-text">矢量文件不带美化样式和字段，<a class="cliLink" href="help/77747.html" @click="StatisticsData(352,124317)" target="_blank" title="下载矢量格式了解详情">了解详情</a></span>
                    </h4>
                  </div>
                  <div class="modal-body">
                    <div class="main-setting">
                      <div class="wrap-item code-vector-format" id="code-vector-format">
                        <div class="label-title">矢量格式：</div>
                        <div class="vector-content">
                          <div class="vector-download-item pdf-download" id="pdf-download" @click="StatisticsData(352,124312)">
                            <div class="download-box">
                              <img alt="" src="../../assets/images/04d5532a149b.png"/>
                              <span class="format-text">PDF 矢量</span>
                            </div>
                          </div>
                          <div class="vector-download-item svg-download" id="svg-download" @click="StatisticsData(352,124313)">
                            <div class="download-box">
                              <img alt="" src="../../assets/images/04d5532a149b.png"/>
                              <span class="format-text">SVG 矢量</span>
                            </div>
                          </div>
                          <div class="vector-download-item eps-download" id="eps-download" @click="StatisticsData(352,124314)">
                            <div class="download-box">
                              <img alt="" src="../../assets/images/04d5532a149b.png"/>
                              <span class="format-text">EPS 矢量</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="wrap-item code-vector-package-download" id="code-vector-package-download">
                        <div class="label-title">打包下载：</div>
                        <div class="vector-content">
                          <div class="vector-download-item package-download" id="package-download" @click="StatisticsData(352,124315)">
                            <div class="download-box">
                              <img alt="" src="../../assets/images/04d5532a149b.png"/>
                              <span class="format-text">打包3种格式的矢量格式文件</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- QR Style wrapper -->
            <div class="qr-style-wrapper">
              <div class="qr-style-content">
                <div class="close">×</div>
                <div class="real-content"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal for comment -->
    <div class="modal fade" data-backdrop="static" id="modal-alert-comment-box">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="padding:15px 15px;border-bottom: none;">
            <button class="close" data-dismiss="modal" id="comment-close-button" style="position: absolute;right: 15px;top: 15px;" type="button">
              <span aria-hidden="true">×</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body p-x-md" style="padding-top:0px;padding-bottom:0px;">
            <div id="comment-box"></div>
            <div class="feedback-item clearfix feedback-box">
              <div class="feedback-label">
                回复方式
              </div>
              <div class="feedback-content feedback-content-500">
                <div>
                  <label class="radio-inline">
                    <input id="receiveWechat" name="receiveMethodModal" type="radio" value="wechat"/> 微信快捷接收（推荐）
                  </label>
                  <label class="radio-inline">
                    <input id="receiveEmail" name="receiveMethodModal" type="radio" value="email"/> 邮箱接收
                  </label>
                </div>
                <div class="none m-t" id="email-area">
                  <input class="form-control text-xs" id="email" name="email" placeholder="我们将以邮件形式答复你" type="text" value=""/>
                </div>
                <div class="none m-t text-darkgrey" id="wechat-area">
                  <img alt="" class="m-r" id="wechat-qr" src=""/>
                  <div class="logo-in-qrcode">
                    <img alt="loading" src="../../assets/images/28ae6fb6d9ad.png"/>
                  </div>
                  <div class="scan-success none">
                    <i class="fa fa-check text-green"></i> 已关注
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer" style="border-top: none;">
            <span class="m-l text-danger none" id="error-message"></span>
            <button class="btn btn-outline b-green text-green" data-dismiss="modal" id="publish-cancel-btn" style="margin-bottom: 0;margin-left: 5px;height: 28px;font-size: 12px;line-height: 11px;width:72px;">取消</button>
            <button class="btn green" data-loading-text="提交中..." id="publish-submit-btn" style="margin-bottom: 0;margin-left: 5px;height: 28px;font-size: 12px;line-height: 12px;width:72px;">提交</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Style min-width -->
    <div class="tab-file-box new-light bottom-white-line">
      <div class="page-main-content">
        <div class="nav-fixed-empty"></div>
        <div id="tab-nav">
          <ul class="tab-ul list_tab page-main-content">
            <li class="tab-item noMarginLeft active" data-id="510" data-name="功能介绍" data-tab-id="510" data-tab-item="" data-tab-path="info" data-tab-type="blog" data-tab-url="/weixin" data-type="微信">
              <a href="weixin.html" rel="canonical" title="功能介绍">
                功能介绍
              </a>
            </li>
            <li class="tab-item" data-id="509" data-name="操作教程" data-tab-id="509" data-tab-item="" data-tab-path="teach" data-tab-type="blog" data-tab-url="/weixin/teach" data-type="微信">
              <a href="weixin/teach.html" rel="canonical" title="操作教程">
                操作教程
              </a>
            </li>
            <li class="tab-item" data-id="3600" data-name="讨论" data-tab-id="3600" data-tab-item="" data-tab-path="comment" data-tab-type="comment" data-tab-url="/weixin/comment" data-type="微信">
              <a href="weixin/comment.html" id="comment-tab-item" rel="canonical" title="讨论">
                讨论(266)
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div id="new-blog-container"></div>

    <div class="w-p100 p-b-lg tab-weixin-box white tab-content-container">
      <div class="page-main-content white">
        <div class="article-tab-box clearfix" id="article">
          <div class="wordpress-article">
            <div class="wiki wordpress-article-box doc-content inline" id="wordpress_article_box">
              <div class="wait-now" id="wait_now" style="display: none;">
                <img alt="loading" src="../../assets/images/cbd0851f409c.gif"/>
              </div>
              <div class="wordpress_article_info_box entry-content" id="wordpress_article_info_box">
                <h2>主要功能</h2>
                <p>微信公众号、个人微信号、微信群二维码、微信支付二维码等二维码美化，自定义添加logo和文字，修改颜色、码眼等样式；下载透明背景的二维码矢量图。</p>
                <p><a name="faq"></a></p>
                <h3>常见问题</h3>
                <h4>1. 个人微信二维码或微信群二维码可以做成活码吗？</h4>
                <p>仅支持上传微信二维码图片生成活码，扫码显示微信二维码图片，需要保存图片到相册，再用微信扫一扫识别。</p>
                <p>无法自动切换个人或群二维码图片，如果需要替换图片需要登录草料后台手动更换。</p>
                <p>制作方法：草料首页顶部导航栏选择【<a href="img.html" title="图片">图片</a>】，上传微信二维码图片，可添加更多描述内容，点击【生成二维码】即可。</p>
                <blockquote>
                  <p>依据<a href="https://weixin.qq.com/cgi-bin/readtemplate?t=page/agreement/personal_account">《微信个人账号使用规范》</a>，请保证个人微信和微信群是正规用途，审核人员会定期对此类活码的用途进行检查，如果发现涉嫌违规的行为，会限制二维码的访问。<a href="help/48433.html">了解详情 </a></p>
                </blockquote>
                <h4>2. 能制作不会失效的微信群二维码吗？能解除只能加100人的限制吗？</h4>
                <p>不能，微信群二维码由微信平台运营，草料无法解除任何微信平台的规则限制，如微信群二维码7天失效、只能加100人等。</p>
                <h4>3. 可以实现扫描后出现随机微信二维码吗？</h4>
                <p>草料不支持此功能。</p>
                <h4>4. 能统计微信二维码关注量和来源吗？</h4>
                <p>草料用户后台仅能统计活码的扫描量，无法统计微信的关注量和来源。</p>
                <h4>5.怎么获取微信二维码的链接？</h4>
                <p>由于微信规则限制，个人微信、群微信、公众号二维码都只能扫码打开，不支持转成链接。草料平台只支持对微信类二维码进行美化。</p>
                <h4>6.微信二维码解码后的链接打开后是下载微信的页面</h4>
                <p>由于微信平台规则限制，个人微信、群微信、公众号二维码都只能扫码打开了，不支持解码获取链接。</p>
              </div>
            </div>
            <div class="wikiOutlineWrapper" ref="outlineWrapper">
              <ul class="wikiOutlineContainer" ref="outlineContainer">
                <li v-for="(item, index) in outlineItems"
                    :key="index"
                    :class="['item', { active: activeOutlineIndex === index }]"
                    :data-target-header="item.tagName"
                    @click="scrollToHeader(item, index)">
                  <span>{{ item.text }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal for weixin web scan -->
    <div class="modal fade" id="weixinWebscanModal" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 650px;">
          <div class="modal-header">
            <button aria-label="Close" class="close" data-dismiss="modal" type="button">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">二维码扫描</h4>
          </div>
          <div class="modal-body">
            <div class="scanner">
              <div class="scan-area">
                <div class="mark top-left"></div>
                <div class="mark top-right"></div>
                <div class="mark bottom-left"></div>
                <div class="mark bottom-right"></div>
              </div>
              <video class="scanVideo" height="600" width="600"></video>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

// Wiki outline navigator instance
const wikiOutlineNavigatorIns = ref(null)

// Outline navigation state - only show h2 headers
const outlineItems = ref<Array<{text: string, tagName: string, element: HTMLElement}>>([])
const activeOutlineIndex = ref(0)
const isScrolling = ref(false)
const outlineWrapper = ref<HTMLElement>()
const outlineContainer = ref<HTMLElement>()

// Outline navigation functions
const initOutlineNavigation = () => {
  nextTick(() => {
    collectHeaders()
    setupScrollListener()
  })
}

const collectHeaders = () => {
  // Collect only h2 elements from the wordpress article content
  const headers = document.querySelectorAll('.wordpress_article_info_box h2')
  outlineItems.value = Array.from(headers).map((header: HTMLElement) => ({
    text: header.textContent || '',
    tagName: header.tagName,
    element: header
  }))
  
  // Set the first item as active by default
  if (outlineItems.value.length > 0) {
    activeOutlineIndex.value = 0
  }

  // Show or hide outline container based on whether there are headers
  if (outlineWrapper.value) {
    if (outlineItems.value.length > 0) {
      outlineWrapper.value.style.display = 'block'
      outlineContainer.value?.classList.add('hasOutline')
    } else {
      outlineWrapper.value.style.display = 'none'
      outlineContainer.value?.classList.remove('hasOutline')
    }
  }
}

const setupScrollListener = () => {
  window.addEventListener('scroll', updateActiveOutline)
}

const updateActiveOutline = () => {
  if (isScrolling.value || outlineItems.value.length === 0) return

  let activeIndex = 0 // Default to first item
  const scrollTop = window.scrollY
  const headerOffsetTop = 100 // Offset for header detection

  // Find the current active header based on scroll position
  for (let i = 0; i < outlineItems.value.length; i++) {
    const element = outlineItems.value[i].element
    const elementTop = element.offsetTop - headerOffsetTop
    
    if (scrollTop >= elementTop) {
      activeIndex = i
    } else {
      break
    }
  }

  activeOutlineIndex.value = activeIndex
}

const isElementScrolled = (element: HTMLElement): boolean => {
  const rect = element.getBoundingClientRect()
  return rect.top <= 100 // Element is considered "scrolled past" when it's 100px from top
}

const scrollToHeader = (item: { element: HTMLElement, text: string }, index: number) => {
  if (activeOutlineIndex.value === index || isScrolling.value) return

  activeOutlineIndex.value = index
  isScrolling.value = true

  // Smooth scroll to the target header
  const offsetTop = item.element.offsetTop
  window.scrollTo({
    top: offsetTop,
    behavior: 'smooth'
  })

  // Reset scrolling flag after animation
  setTimeout(() => {
    isScrolling.value = false
  }, 800)
}

onMounted(() => {
  // Initialize outline navigation
  initOutlineNavigation()
})

onUnmounted(() => {
  // Cleanup if needed
  wikiOutlineNavigatorIns.value = null
  
  // 清理滚动事件监听
  window.removeEventListener('scroll', updateActiveOutline)
})
</script>


<style src="../../assets/css/490815b50ee0.css" scoped/>
<style src="../../assets/css/00b58f2b8f9a.css" scoped/>
<style src="../../assets/css/e88b6e80fbce.css" scoped/>
<style src="../../assets/css/f6d6073f1386.css" scoped/>
<style src="../../assets/css/c1a2dbc35903.css" scoped/>
<style src="../../assets/css/0ff6e05882a2.css" scoped/>
<style src="../../assets/css/b76aaf663b7f.css" scoped/>
<style src="../../assets/css/5e6b9bf9fd2f.css" scoped/>
<style src="../../assets/css/039328ebe251.css" scoped/>
<style src="../../assets/css/2034b15460f1.css" scoped/>
<style src="../../assets/css/dbece38160fc.css" scoped/>
<style src="../../assets/css/c1580d903c0f.css" scoped/>
<style src="../../assets/css/963d993f037a.css" scoped/>
<style src="../../assets/css/4f203d7b339f.css" scoped/>
<style src="../../assets/css/228034f02af3.css" scoped/>
<style src="../../assets/css/acfff1e57b0e.css" scoped/>
<style src="../../assets/css/3db6acd047a4.css" scoped/>
<style src="../../assets/css/550d0fc5c52a.css" scoped/>
<style src="../../assets/css/7272988962e3.css" scoped/>
<style src="../../assets/css/b64637f7e36e.css" scoped/>
<style src="../../assets/css/cac1baa43ce6.css" scoped/>
<style src="../../assets/css/5fd66d82cf52.css" scoped/>
<style src="../../assets/css/52f4b4a7ee30.css" scoped/>

<style scoped>

/* 复制原HTML中的内联样式 */
.mobile-scene-min-width {
  min-width: 1200px;
}

.bottom-white-line {
  border-bottom: 1px solid #fff;
}

#wechat-area {
  position: relative;
  height: 100px;
}

#wechat-qr {
  width: 100px;
  height: 100px;
  vertical-align: bottom;
}

.logo-in-qrcode {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 20px;
  height: 20px;
}

.logo-in-qrcode img {
  width: 100%;
  height: 100%;
}

.scan-success {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(255,255,255,0.8);
  text-align: center;
  line-height: 100px;
  color: rgba(0, 0, 0, 0.87);
}

#email {
  width: 300px;
  border-radius: 4px;
}

.feedback-box .feedback-label {
  font-size: 14px;
  color: #777;
  width: 95px;
  line-height: 38px;
  float: left;
}

.feedback-box .feedback-content-500 {
  width: 408px;
}

.feedback-box .feedback-content {
  max-width: 100%;
  float: left;
}

.feedback-box .feedback-content .radio-inline {
  color: #666;
  margin-top: 10px;
}

#error-message {
  font-size: 12px;
}

.wikiOutlineWrapper {
  width: 260px !important;
  margin-left: 64px !important;
  margin-top: 0 !important;
  position: sticky !important;
  top: 80px !important;
  display: block !important;
  visibility: visible !important;
}
</style>
